<!-- Set this_pages_navbar  -->
{% comment %}
Here, we loop through site.data for the current view
to set two variables:
  1. this_pages_navbar - a object containing this page's navbar
  2. navbars - a list of this site's toplevel navbars sorted by navbar.order

The code is a little roundabout for a few reasons:
  - liquid doesn't provide a simple way to create an empty array,
  so we just split an empty string.
  - liquid stores the navbars (in site.data.navbars) as
  a list keyed by the filename. We don't really care about the filename
  here, so we just need the data field. But, liquid doesn't provide a
  simple way to 'iteritems', so we have to manually loop through and access
  the  2nd item.
  - liquid also has a bug where it truncates after first `.` of a directory
  name in _data (i.e. _data/v0.1 will be stored as data.v0). Until that
  bug's fixed, we store version data in _data/v0_1 and do a string replace
  to find the right data.
{% endcomment %}

{% assign current_page = page.path | replace_first: page.version,"" | split: "/" %}
{% assign current_page = current_page[0] | prepend: "/" | append: "/" %}

{% capture version %}{{ page.version | replace: ".","_" }}{% endcapture %}

{% assign unsorted_navbars = "" | split:"|" %}
{% for navbars_hashmap in site.data.navbars %}
  {% assign navbar = navbars_hashmap[1] %}
  {% assign unsorted_navbars = unsorted_navbars | push: navbar %}
  {% assign navbar_size = navbar.path | size %}
  {% if current_page == navbar.path %}
    {% assign this_pages_navbar = navbar %}
  {% endif %}
{% endfor %}
{% assign navbars = unsorted_navbars | sort:"order" %}


<!Doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="docsearch:version" content="{{page.version}}">
    <link rel="shortcut icon" type="image/png" href="{{site.baseurl}}/images/favicon.png">
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    <link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto+Mono' type='text/css'>
    {% if page.custom_css %}
    <link rel="stylesheet" href="{{site.baseurl}}/{{ page.custom_css }}"/>
    {% endif %}
    <link href="https://www.projectcalico.org/wp-content/themes/dante/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://www.projectcalico.org/wp-content/plugins/wpfront-notification-bar/css/wpfront-notification-bar.css?ver=1.7.1" rel="stylesheet" type="text/css" media="all">
    <link rel="stylesheet" href="{{site.baseurl}}/css/instantsearch/instantsearch.min.css"/>
    <link rel="stylesheet" href="{{site.baseurl}}/css/style.css"/>
    <script src="{{site.baseurl}}/js/jquery-2.2.0.min.js"></script>
    <script src="{{site.baseurl}}/js/bootstrap/bootstrap.min.js"></script>
    <script src="{{site.baseurl}}/js/instantsearch/instantsearch.min.js"></script>
    <script src="{{site.baseurl}}/js/script.js"></script>
    <script defer src="{{site.baseurl}}/js/scrollPage.js"></script>
{% if page.version != "v1.5" and page.version != "v1.6" and page.version != "v2.0" and page.version != "v2.1" and page.version != "v2.2" and page.version != "v2.3" and page.version != "v2.4" and page.version != "v2.5" and page.version != "v2.6" and page.version != "v3.0" and page.version != "v3.1" and page.version != "v3.2" and page.version != "v3.3" %}
    <script src="{{site.baseurl}}/js/clipboard.min.js"></script>
    <script src="{{site.baseurl}}/js/code-select.js"></script>
{% endif %}
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-52125893-4', 'auto');
      ga('send', 'pageview');
    </script>
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-5FQ2QV4');</script>
    <!-- End Google Tag Manager -->
    {% seo %}
  </head>
  <body>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5FQ2QV4" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    <section>
      <nav id="toplevel-nav" class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
          <div class="navbar-header">
            <!-- Hamburger menu for mobile -->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#tigera-navbar" aria-expanded="false" aria-controls="tigera-navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <!-- Left brand image -->
            <a class="navbar-brand" href="https://projectcalico.org/">
              <img alt="Calico" src="{{site.baseurl}}/images/brand.png">
            </a>
          </div>
          <div id="tigera-navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
              <li><a data-proofer-ignore href="/releases">Releases</a></li>
              <li><a href="https://www.projectcalico.org/community">Community</a></li>
              <li><a href="#"><span>Support</span></a>
                <ul>
                    <!-- <li><a data-proofer-ignore href="/latest/getting-started/"><i class="fa fa-tachometer" aria-hidden="true"></i> &nbsp; Getting Started</a></li> -->
                    <!-- <li><a href="{{site.baseurl}}"><i class="fa fa-book" aria-hidden="true"></i> &nbsp; Documentation</a></li> -->
                    <!--<li><a href="https://www.projectcalico.org/tutorials"><i class="fa fa-file-code-o" aria-hidden="true"></i> &nbsp; Tutorials &amp; Examples</a></li>
                    <li><a href=""><i class="fa fa-paper-plane-o" aria-hidden="true"></i> &nbsp; Online Workshops</a></li>-->
                    <li><a href="https://www.projectcalico.org/community">Community Support</a></li>
                    <li><a href="https://www.tigera.io/tigera-products/calico-essentials/" target="_blank">Commercial Support</a></li>
                    <li><a href="https://www.tigera.io/training/" target="_blank">Training</a></li>
                    <li><a href="https://www.projectcalico.org/security-bulletins" target="_blank">Security Bulletins</a></li>
                    <li><a href="https://www.projectcalico.org/vulnerability-disclosure" target="_blank">Report Security Issue</a></li>
                </ul>
              </li>
              <li><a href="https://www.projectcalico.org/blog">Blog</a></li>
              <li><a href="https://github.com/projectcalico/calico" target="_blank">Github</a></li>
              <li class="desktop"><a href="https://tigera.io" target="_blank">
                <img alt="Tigera" class="desktopImage" style='margin-top: -8px;' height="38" align="absmiddle" src="{{site.baseurl}}/images/tigera-badge.png"></a>
              </li>              
            </ul>
            <form class="navbar-form visible-xs">
              <ul class="nav navbar-nav navbar-right">
                {% for navbar in navbars %}
                  <li {% if this_pages_navbar == navbar %} class="active"{% endif %}>
                    <a href="{{site.baseurl}}{{navbar.path}}">{{ navbar.title }}</a>
                  </li>
                {% endfor %}
              </ul>
            </form>
          </div>
        </div>
      </nav>
      <div class="container-fluid">
        <div class="row-offcanvas row-offcanvas-left main-content {% unless page.show_toc %}no-toc{% endunless  %}">
          <div class="sidebar-container sidebar-offcanvas">
            <div class="sidebar">
              <div class="search">
                <div class="search-input-container" data-toggle="popover" data-trigger="focus" data-placement="bottom"></div>
                <div class="search-container">
                  <div class="search-container__results"></div>
                  <div class="search-container__pagination"></div>
                </div>
              </div>
              <div id="sidebar">
                <div class="panel-group" id="sidebar-accordion">
                  {% for navbar in navbars %}
                    {% assign navbar_id = navbar.path | replace: "/", "-" | prepend: "navbar" %}
                    <div class="panel panel-default">
                      <div
                        class="panel-heading{% if this_pages_navbar == navbar %} current-page {% endif %}"
                        role="button"
                        data-toggle="collapse"
                        data-target="#{{ navbar_id }}"
                        aria-controls="{{ navbar_id }}"
                      >
                        <h4 class="panel-title">
                            <a href="{{site.baseurl}}{{navbar.path}}" class="{% if navbar.section %}navbar-title--not-clickable{% endif %}">
                              <span>{{ navbar.title }}</span>
                            </a>
                        </h4>
                      </div>
                      {% assign availableToc = navbar.section | where_exp: "item", "item.title != navbar.title" %}
                      {% assign tocPrefix = navbar_id | append: "nav" %}
                      <div id="{{ navbar_id }}" class="panel-collapse collapse {% if this_pages_navbar == navbar and availableToc.size > 0 %}in{% endif %}">
                          {% if availableToc %}
                            <div class="panel-body">
                                {% include sidebar.html sidebar=availableToc prefix=tocPrefix %}
                            </div> 
                          {% endif %}
                      </div>
                    </div>
                  {% endfor %}
                </div>
                <div class="row">
                  <div class="col-sm-0"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="article-container">
            <div id="content-main">
              <p class="visible-xs clearfix">
                <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
              </p>
              <!-- TOP DOCUMENTATION PAGE NAVBAR -->
              {% capture edit_page %}
                  <a data-proofer-ignore href="https://github.com/projectcalico/calico/tree/master/{{page.path}}" class="edit-page-link" target="_blank">
                    <i class="fa fa-github" aria-hidden="true"></i>
                    Edit this page
                  </a>
              {% endcapture %}
              <!-- END TOP DOCUMENTATION PAGE NAVBAR -->
              {% include nav-breadcrumbs.html content=edit_page %}

              {% unless site.is_latest %}
              {% include version_warning.html %}
              {% endunless %}

              {% if page.calico_enterprise -%}
              {% include enterprise_header.html %}   
              {% endif -%}
              {% if page.show_title -%}
              <h1>{{ page.title }}</h1>
              {% endif -%}
              {% if page.show_read_time -%}
                {% include read_time.html %}
              {% endif -%}
              <!-- TODO [turk]: uncomment once JS supports a different identifier besides ID so that we don't have two elements with the same ID
              <div class="visible-xs visible-sm">
                {% include toc.html html=content class=".toc" item_class=".toc__nested" %}
              </div>
               -->
              {{ content }}
              {% if page.calico_enterprise -%}
              {% include enterprise_footer.html %}   
              {% endif -%}

              <!-- BOTTOM DOCUMENTATION PAGE NAVBAR -->
              <div style="margin-top: 60px; margin-bottom: 40px; padding-top: 20px; border-top: 1px solid #999; text-align: left; color: #999;">
                <a href="https://slack.projectcalico.org/" style="margin-left: 30px; color: #999; text-decoration: none;" target="_blank"><i class="fa fa-slack" aria-hidden="true"></i>&nbsp;Slack</a>
                <a href="https://discuss.projectcalico.org/" style="margin-left: 30px; color: #999; text-decoration: none;" target="_blank"><i class="fa fa-comments" aria-hidden="true"></i>&nbsp;Discourse</a>
                <a href="https://github.com/projectcalico/calico" style="margin-left: 30px; color: #999; text-decoration: none;" target="_blank"><i class="fa fa-github" aria-hidden="true"></i>&nbsp;GitHub</a>
                <a href="https://twitter.com/projectcalico" style="margin-left: 30px; color: #999; text-decoration: none;" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i> Twitter</a>
                <a href="https://www.youtube.com/channel/UCFpTnXDNcBoXI4gqCDmegFA" style="margin-left: 30px; color: #999; text-decoration: none;" target="_blank"><i class="fa fa-youtube-play" aria-hidden="true"></i>&nbsp;YouTube</a>
                <a href="https://www.tigera.io/tigera-products/calico-essentials/" style="margin-left: 30px; color: #999; text-decoration: none;" target="_blank"><i class="fa fa-graduation-cap" aria-hidden="true"></i>&nbsp;Training</a>
              </div>
              <!-- END BOTTOM DOCUMENTATION PAGE NAVBAR -->
            </div>
          </div>
          {% if page.show_read_time -%}
            <div class="toc-container">
              <div class="sticky-toc">
                {% include toc.html html=content class=".toc" item_class=".toc__nested" %}
              </div>
            </div>
          {% endif -%}
        </div>
      </div>
    </section>

    <script src="{{site.baseurl}}/js/searchConfig.js"></script>

    <script type="text/template" id="search-results-template">
      {% raw %}
      <div class="search-results">
        {{#hits}}

        {{#shouldDisplayTopCategory}}
        {{#hierarchy.lvl0}}
          <a href="{{url}}" class="search-results__group-header">
            {{{_highlightResult.hierarchy.lvl0.value}}}
          </a>
        {{/hierarchy.lvl0}}
        {{/shouldDisplayTopCategory}}

        <div class="search-results__search-result search-result columns-layout">
          <div class="columns-layout__left-column">
            {{#hierarchy.lvl1}}
              <a href="{{url}}" class="search-result__subcategory">
                {{{_highlightResult.hierarchy.lvl1.value}}}
              </a>
            {{/hierarchy.lvl1}}
          </div>

          <div class="columns-layout__right-column">
            {{#hierarchy.lvl2}}
              <a href="{{url}}" class="search-result__subsubcategory">
                {{{_highlightResult.hierarchy.lvl2.value}}}
              </a>
            {{/hierarchy.lvl2}}

            {{#hierarchy.lvl3}}
              <a href="{{url}}" class="search-result__subsubsubcategory">
                {{{_highlightResult.hierarchy.lvl3.value}}}
              </a>
            {{/hierarchy.lvl3}}

            {{#content}}
              <a href="{{url}}" class="search-result__content">
                {{{_snippetResult.content.value}}}
              </a>
            {{/content}}
          </div>
        </div>
        {{/hits}}
      </div>
      {% endraw %}
    </script>

    <script>
      $(document).ready(function() {
        window.initializeSearch('{{page.version}}', '.search-input-container', '.search-container', '.search-container__results', '.search-container__pagination');
      });
    </script>
  </body>
</html>
